<template>
    <div class="goods-detail" v-if="details">
      <!-- 属性 -->
      <ul class="attrs">
        <li v-for="(item, key) in details.properties" :key="key">
          <span class="dt">{{ item.name }}</span>
          <span class="dd">{{ item.value }}</span>
        </li>
      </ul>
      <!-- 图片 -->
      <img v-for="(ite, ky) in details.pictures" :key="ky" :src="ite" alt="" />
    </div>
  </template>
  
  <script>
  export default {
   
    props: ["details"],
    data() {
      return {};
    },
  
    mounted() {},
  
    methods: {},
  };
  </script>
  
  <style lang="scss" scoped>
  .goods-detail {
    padding: 40px;
    .attrs {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;
      li {
        display: flex;
        margin-bottom: 10px;
        width: 50%;
        .dt {
          width: 100px;
          color: #999;
        }
        .dd {
          flex: 1;
          color: #666;
        }
      }
    }
    > img {
      width: 100%;
    }
  }
  </style>